import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { MapView, Marker } from 'react-native-amap3d';
import moment from 'moment';

export default class Home_qd extends Component {

    static navigationOptions = props => {

        return {
            headerTitle: `签到          `,
            headerTintColor: "#fff",
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
                fontSize: 16
            },
            headerStyle: {
                backgroundColor: "#3296FA",
            }
        }
    };
    
    componentDidMount () {
        this.ontime()
    }

    state = {
        startD: 0,
        endD: 0,
        time:moment().format("HH:mm:ss"),
        latitude:0,
        longitude:0
    }

    ondw = (nativeEvent) => {
        console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)
        this.setState({
            latitude:nativeEvent.latitude,
            longitude:nativeEvent.longitude
        })
    }

    onqd = () => {

        this.props.navigation.navigate('Home_qdbez')
    }

    ontime = () => {
        setInterval(() => {
            this.setState({
                time:moment().format("HH:mm:ss")
            })
        },1000)
    }

    render() {
        const coordinate = {
            latitude: 39.906901,
            longitude: 116.397972,
        }

        return (
            <View style={{ flex: 1, justifyContent: 'center', backgroundColor: "#ccc" }}>
                <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15, backgroundColor: "#fff" }}>
                    <View style={{ flex: 0.5, flexDirection: "row", alignItems: "center", }}>
                        <Image
                            style={{ width: 35, height: 35 }}
                            source={require('../../../static/img/rili.png')}
                        />


                    </View>
                    <View style={{ flex: 2.5 }}>
                        <Text style={{ fontSize: 14, color: "#000", marginLeft: 5 }}>时间</Text>
                        <Text style={{ fontSize: 14, color: "#000", marginLeft: 5 }}>签到站点</Text>
                    </View>
                    <View style={{ flex: 2.5, paddingRight: 15 }}>
                        <Text style={{ fontSize: 14, textAlign: "right" }}>{moment().format('YYYY-MM-DD')}</Text>
                        <Text style={{ fontSize: 14, textAlign: "right" }}>#1燃气站</Text>
                    </View>
                </View>

                {/* <View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 15, marginTop: 5, marginBottom: 5, backgroundColor: "#fff" }}>
                    <View style={{ flex: 4, flexDirection: "row", alignItems: "center", }}>
                        <Image
                            style={{ width: 35, height: 35 }}
                            source={require('../../../static/img/rili.png')}
                        />
                        <Text style={{ fontSize: 16, color: "#000", marginLeft: 5 }}>签到站点</Text>

                    </View>
                    <View style={{ flex: 1.5 }}>
                        <Text style={{ fontSize: 16 }}>#1燃气站</Text>
                    </View>
                </View> */}
                <View style={{ flex: 8, marginTop: 5 }}>
                    <MapView
                        style={{ height: 200 }}
                        locationEnabled={true}
                        locationInterval={10000}
                        distanceFilter={10}
                        showsLocationButton
                        coordinate={{
                            latitude: this.state.latitude,
                            longitude: this.state.longitude,
                        }}
                        // onLocation={this.ondw.bind(this,nativeEvent)}
                        onLocation={({ nativeEvent }) => this.ondw(nativeEvent)}
                    >
                        <Marker
                            active
                            title='这是一个标注点'
                            color='red'
                            description='当前位置'
                            coordinate={{
                                latitude: this.state.latitude,
                                longitude: this.state.longitude,
                            }}
                        />
                        <MapView.Circle
                            strokeWidth={1}
                            strokeColor="#6E75FF"
                            fillColor="rgba(125, 131, 255, 0.5)"
                            radius={10000}
                            coordinate={{
                                latitude: this.state.latitude,
                                longitude: this.state.longitude,
                            }}
                        />
                    </MapView>
                    <View style={{ flex: 1, backgroundColor: "#fff" }}>
                        <View style={{ height: 40, flexDirection: "row", alignItems: "center", display: "flex", paddingLeft: 15 }}>
                            <View style={{ width: 10, height: 10, backgroundColor: "skyblue", borderRadius: 50 }}></View><Text>我的位置 : </Text><Text style={{ color: "#000" }}>武汉市XX区</Text>
                        </View>

                        <View style={{ flex: 1, alignItems: "center", justifyContent: 'center', display: "flex" }}>
                            <View style={{ width: 100, height: 100, borderRadius: 50, backgroundColor: "#8D93FF", alignItems: "center", justifyContent: 'center', display: "flex", elevation: 20 }}>
                                <View style={{ width: 15, height: 15, backgroundColor: "red" }}></View>
                                <View><Text style={{ color: "#fff", margin: 5 }}>签到打卡</Text></View>
                                <View><Text style={{ color: "#C1C4FF" }}>{this.state.time}</Text></View>
                            </View>
                            <View style={{ height: 40, flexDirection: "row", alignItems: "center", display: "flex", paddingLeft: 15, justifyContent: 'center' }}>
                                <View style={{ width: 10, height: 10, backgroundColor: "skyblue", borderRadius: 50 }}></View><Text>已进入#1燃气站签到范围</Text>
                            </View>
                            <View style={{ height: 10, flexDirection: "row", alignItems: "center", display: "flex", paddingLeft: 15, justifyContent: 'center' }}>
                                <Text>定位不准? 点击"</Text><Text style={{ color: "#8D93FF", fontSize: 16 }} onPress={this.onqd}>签到</Text><Text>"录入备注信息</Text>
                            </View>
                        </View>



                    </View>
                </View>
            </View>
        )
    }
}